<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="GoodName智能命名翻译工具，AI驱动的编程变量命名助手。支持IDEA、VSCode、WebStorm、PyCharm等IDE，一键中文翻译英文，支持驼峰命名、蛇形命名、帕斯卡命名、常量命名等多种编程规范。免费开源，提升编程效率，规范代码命名。">

    <meta name="keywords"
        content="编程命名工具,AI翻译,中文转英文,IDEA插件,VSCode插件,WebStorm插件,PyCharm插件,驼峰命名,蛇形命名,帕斯卡命名,编程效率工具,GoodName,智能命名助手,代码命名规范,变量命名,函数命名,类名命名,方法命名,编程翻译器,代码翻译,程序员工具,开发工具,IDE扩展,编程助手,命名转换,编程规范,代码规范,软件开发工具,编程插件,免费编程工具,开源工具,Java命名,JavaScript命名,Python命名,C#命名,PHP命名,Go命名,Kotlin命名,Swift命名,TypeScript命名,Vue命名,React命名,Angular命名,Spring命名,编程最佳实践,代码质量,重构工具,编程生产力,开发效率,程序员必备,编程神器,代码神器">

    <meta name="author" content="瓜瓜 (Good IT Team)">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <meta name="bingbot" content="index, follow">

    <!-- 地理位置 -->
    <meta name="geo.region" content="CN">
    <meta name="geo.country" content="China">
    <meta name="language" content="zh-CN">

    <!-- Open Graph 标签 -->
    <meta property="og:title" content="GoodName智能命名工具 - AI驱动的编程命名助手 | 免费IDE插件">
    <meta property="og:description" content="专为程序员设计的智能命名翻译工具，支持IDEA、VSCode等主流IDE，AI翻译中文为英文编程命名，支持多种命名格式，免费提升编程效率。">
    <meta property="og:image" content="https://goodit.58it.cn/favicon.ico">
    <meta property="og:url" content="https://goodit.58it.cn">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="zh_CN">
    <meta property="og:site_name" content="GoodName智能命名工具">

    <!-- Twitter Card 标签 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="GoodName智能命名工具 - AI驱动的编程命名助手">
    <meta name="twitter:description" content="让编程命名更简单，让代码更规范。支持IDEA、VSCode等多平台的免费智能中文翻译命名工具。">
    <meta name="twitter:image" content="https://goodit.58it.cn/favicon.ico">
    <meta name="twitter:site" content="@GoodName">

    <!-- 百度相关 -->
    <meta name="baidu-site-verification" content="你的百度验证码">
    <meta name="applicable-device" content="pc,mobile">

    <!-- 其他搜索引擎 -->
    <meta name="360-site-verification" content="你的360验证码">
    <meta name="sogou_site_verification" content="你的搜狗验证码">

    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "GoodName智能命名工具",
        "description": "AI驱动的编程命名翻译工具，支持多种IDE和编程语言",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Windows, macOS, Linux",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "CNY"
        },
        "author": {
            "@type": "Organization",
            "name": "Good IT Team",
            "url": "https://goodit.58it.cn"
        },
        "downloadUrl": "https://plugins.jetbrains.com/plugin/goodname",
        "softwareVersion": "1.0.0",
        "datePublished": "2024-06-17",
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.8",
            "ratingCount": "1000"
        }
    }
    </script>

    <!-- 链接站点的favicon图标 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="canonical" href="https://goodit.58it.cn">

    <!-- DNS预连接优化 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdn.jsdelivr.net">

    <title>GoodName智能命名工具 - AI编程翻译插件 | IDEA/VSCode免费命名助手 | 中文转英文编程命名神器</title>

    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #E8F5E8;
            --text-color: #2C3E50;
            --accent-color: #2196F3;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
        }

        /* 导航栏样式 */
        .navbar {
            background: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--primary-color);
            font-size: 1.5em;
            font-weight: bold;
        }

        .nav-logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4CAF50, #2196F3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
            align-items: center;
        }

        .nav-link {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary-color);
            background: var(--secondary-color);
            transform: translateY(-2px);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 80%;
        }

        /* 移动端菜单 */
        .nav-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 5px;
        }

        .nav-toggle span {
            width: 25px;
            height: 3px;
            background: var(--primary-color);
            margin: 3px 0;
            transition: 0.3s;
            border-radius: 2px;
        }

        .nav-toggle.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-6px, 6px);
        }

        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .nav-toggle.active span:nth-child(3) {
            transform: rotate(45deg) translate(-6px, -6px);
        }

        /* 移动端响应式 */
        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: white;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                transition: left 0.3s ease;
                padding-top: 50px;
                gap: 20px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }

            .nav-menu.active {
                left: 0;
            }

            .nav-toggle {
                display: flex;
            }

            .nav-link {
                font-size: 1.2em;
                padding: 15px 30px;
                width: 80%;
                text-align: center;
            }
        }

        .hero {
            background: linear-gradient(rgba(232, 245, 232, 0.95), rgba(232, 245, 232, 0.6)), url('code-bg.jpg');
            background-size: 20%;
            background-position: center;
            display: flex;
            margin: 80px auto 40px;
            padding-top: 40px;
            /* 为导航栏留出空间 */
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            color: var(--primary-color);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .header .logo {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4CAF50, #2196F3, #9C27B0);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        .header p {
            font-size: 1.2em;
            margin-bottom: 20px;
            color: #666;
        }

        .main-content {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .left-section,
        .right-section {
            flex: 1;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .feature-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .feature-item {
            width: auto;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
            padding: 15px;
            background: var(--secondary-color);
            border-radius: 10px;
            border-left: 4px solid var(--primary-color);
        }

        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
        }

        .feature-item p {
            margin: 5px 0;
            font-size: 14px;
            color: #555;
        }

        .feature-item h3 {
            font-size: 1.1em;
            color: var(--primary-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .feature-icon {
            font-size: 18px;
        }

        .installation-steps {}

        .step {
            margin-bottom: 15px;
            font-size: 14px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid var(--accent-color);
        }

        .step h3 {
            font-size: 1.1em;
            color: var(--accent-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .download-btn {
            display: inline-block;
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            transition: all 0.3s ease;
            font-weight: 500;
            box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
        }

        .footer {
            text-align: center;
            padding: 10px;
            background: rgba(255, 255, 255, 0.9);
            color: #666;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .demo-section {
            display: flex;
            justify-content: center;
            color: #000;
            border-radius: 15px;
            margin: 20px auto;
            width: 100%;
        }

        .demo-box {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            line-height: 1.6;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            margin: 10px;
            flex: 1;
        }

        .demo-title {
            color: var(--primary-color);
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }

        .demo-input {
            color: #ffd700;
        }

        .demo-output {
            color: #90ee90;
        }

        .demo-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--primary-color);
            margin: 0 20px;
        }

        .free-tag {
            font-size: 2.5em;
            color: var(--primary-color);
            margin: 10px 0;
            animation: pulse 3s infinite;
            text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
            font-weight: bold;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.05);
                opacity: 0.9;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .supported-platforms {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 30px 0;
            flex-wrap: wrap;
        }

        .platform-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            min-width: 120px;
        }

        .platform-item:hover {
            transform: translateY(-5px);
        }

        .platform-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .platform-name {
            font-weight: 500;
            color: var(--text-color);
        }

        /* 添加弹窗样式 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal {
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .modal h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .modal p {
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .modal-btn {
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            border: none;
            transition: transform 0.2s;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
        }

        .modal-btn.primary {
            background-color: var(--primary-color);
            color: white;
        }

        .modal-btn.secondary {
            background-color: #e0e0e0;
            color: var(--text-color);
        }

        /* 优化容器样式 */
        .container-pay {
            margin-top: 30px;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            width: 500px;
            height: 300px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            background: white;
        }

        .container-pay .text {
            padding: 20px;
            text-align: center;
        }

        .container-pay .image {
            display: flex;
            justify-content: center;
            align-items: center;
            background: white;
        }

        .qr-code {
            max-width: 200px;
            height: auto;
        }

        /* 添加明细列表样式 */
        .donation-list {
            margin-top: 20px;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .donation-list h3 {
            color: var(--primary-color);
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 15px;
        }

        .donation-records {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .donation-item {
            padding: 15px;
            border-radius: 10px;
            background: var(--secondary-color);
            transition: transform 0.3s ease;
        }

        .donation-item:hover {
            transform: translateY(-3px);
        }

        .donation-item .name {
            font-weight: bold;
            color: var(--primary-color);
        }

        .donation-item .price {
            color: #ff6b6b;
            font-size: 1.1em;
            margin: 5px 0;
        }

        .donation-item .describe {
            font-size: 0.9em;
            color: #666;
        }

        .feature-item-pay {
            width: auto;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        .feature-item-pay:hover {
            width: auto;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        .container-pay {
            margin-top: 20px;
            border-radius: 10px;
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .supported-platforms {
                gap: 15px;
            }

            .demo-section {
                flex-direction: column;
            }

            .demo-arrow {
                transform: rotate(90deg);
                margin: 10px 0;
            }
        }
    </style>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?0bd1ed112061ea504b7088d32bae5b77";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="nav-logo">
                <div class="nav-logo-icon">G</div>
                GoodName
            </a>

            <ul class="nav-menu">
                <li><a href="index.html" class="nav-link active">🏠 首页</a></li>
                <li><a href="installation.html" class="nav-link">📖 安装指南</a></li>
                <li><a href="describe.html" class="nav-link">📋 使用指南</a></li>
                <li><a href="faq.html" class="nav-link">❓ 常见问题</a></li>
                <li><a href="updateRecord.html" class="nav-link">🔄 更新记录</a></li>
            </ul>

            <div class="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <div class="hero">
        <div class="container">
            <div class="header">
                <h1>
                    <div class="logo">G</div>
                    GoodName 智能命名工具
                </h1>
                <p>🚀 让编程命名更简单，让代码更规范 - AI驱动的程序员命名神器 🚀</p>
                <div class="free-tag">🆓 完全免费 | 开源工具</div>
            </div>

            <!-- 支持平台展示 -->
            <div class="supported-platforms">
                <div class="platform-item">
                    <div class="platform-icon">💡</div>
                    <div class="platform-name">IntelliJ IDEA</div>
                </div>
                <div class="platform-item">
                    <div class="platform-icon">⚡</div>
                    <div class="platform-name">VSCode</div>
                </div>
                <div class="platform-item">
                    <div class="platform-icon">🌊</div>
                    <div class="platform-name">WebStorm</div>
                </div>
                <div class="platform-item">
                    <div class="platform-icon">🎯</div>
                    <div class="platform-name">PyCharm</div>
                </div>
            </div>

            <!-- 功能演示 -->
            <div class="demo-section">
                <div class="demo-box">
                    <div class="demo-title">✨ 输入中文描述</div>
                    <div class="demo-input">用户管理模块</div>
                    <div class="demo-input">获取用户列表</div>
                    <div class="demo-input">删除用户信息</div>
                    <div class="demo-input">验证用户登录</div>
                </div>
                <div class="demo-arrow">→</div>
                <div class="demo-box">
                    <div class="demo-title">🎉 智能英文命名</div>
                    <div class="demo-output">userManagement</div>
                    <div class="demo-output">getUserList</div>
                    <div class="demo-output">deleteUserInfo</div>
                    <div class="demo-output">validateUserLogin</div>
                </div>
            </div>

            <div class="main-content">
                <div class="left-section">
                    <h2>🌟 核心功能特色</h2>
                    <div class="feature-grid">
                        <div class="feature-item">
                            <h3><span class="feature-icon">🤖</span>AI智能翻译</h3>
                            <p>基于先进AI大模型，准确翻译中文为规范英文编程命名，理解上下文语义</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">🎨</span>多种命名格式</h3>
                            <p>支持驼峰命名、蛇形命名、帕斯卡命名、常量命名等主流编程规范</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">⚡</span>一键快捷翻译</h3>
                            <p>Ctrl+Alt+Shift+1 快捷键一键翻译，提升编程效率</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">🔧</span>智能配置向导</h3>
                            <p>自动检测配置状态，首次使用引导配置，操作简单</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">💻</span>跨平台支持</h3>
                            <p>支持IDEA、VSCode、WebStorm、PyCharm等主流开发环境</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">🌐</span>离线+在线模式</h3>
                            <p>支持本地离线翻译和云端AI翻译，适应不同使用场景</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">🔔</span>智能提醒系统</h3>
                            <p>实时进度提示、成功通知，操作状态一目了然</p>
                        </div>

                        <div class="feature-item">
                            <h3><span class="feature-icon">🆙</span>版本自动更新</h3>
                            <p>智能检测新版本，及时获取最新功能和优化</p>
                        </div>
                    </div>
                </div>

                <div class="right-section">
                    <h2>📥 快速安装使用</h2>
                    <div class="installation-steps">
                        <div class="step">
                            <h3><span class="feature-icon">🔍</span>第一步：搜索插件</h3>
                            <p>打开IDE插件市场，搜索"GoodName"或"智能命名"</p>
                        </div>

                        <div class="step">
                            <h3><span class="feature-icon">⬇️</span>第二步：一键安装</h3>
                            <p>点击"Install"按钮，自动下载安装，无需额外配置</p>
                        </div>

                        <div class="step">
                            <h3><span class="feature-icon">⚙️</span>第三步：选择模式</h3>
                            <p>首次使用弹出配置向导，选择AI翻译或本地翻译模式</p>
                        </div>

                        <div class="step">
                            <h3><span class="feature-icon">🎯</span>第四步：立即体验</h3>
                            <p>选中中文文本，按快捷键即可体验智能命名翻译</p>
                        </div>

                        <div class="step">
                            <h3><span class="feature-icon">📝</span>支持命名格式</h3>
                            <p>• 驼峰命名 (camelCase) - 变量、方法名</p>
                            <p>• 蛇形命名 (snake_case) - Python、数据库</p>
                            <p>• 帕斯卡命名 (PascalCase) - 类名、接口</p>
                            <p>• 常量命名 (CONSTANT_CASE) - 常量定义</p>
                            <p>• 短横线命名 (kebab-case) - CSS、文件名</p>
                        </div>
                    </div>

                    <div style="text-align: center; margin-top: 20px;">
                        <a href="installation.html" class="download-btn">
                            📖 详细安装教程
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 支持与赞助部分 -->
    <div class="container">
        <div class="donation-list">
            <h3>☕ 支持开发 | 持续更新</h3>
            <div style="text-align: center; margin-bottom: 20px;">
                <p>如果这个编程工具对您有帮助，欢迎请开发者喝杯咖啡 ☕</p>
                <p>您的支持是我们持续改进和添加新功能的动力！</p>
            </div>

            <div class="container-pay">
                <div class="text">
                    <h4>微信/支付宝扫码赞助</h4>
                    <p>任意金额都是对开发者的鼓励</p>
                </div>
                <div class="image">
                    <img src="qr-pay.jpg" alt="GoodName开发者赞助二维码" class="qr-code">
                </div>
            </div>

            <div class="donation-records">
                <div class="donation-item">
                    <div class="name">感谢所有支持者</div>
                    <div class="price">❤️</div>
                    <div class="describe">每一份支持都让工具变得更好，助力更多程序员</div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>&copy; 2024 GoodName智能命名工具 by 瓜瓜 (Good IT Team) |
            📞 技术支持: 17607080935 |
            🌐 <a href="https://goodit.58it.cn" style="color: var(--primary-color);">官方网站</a> |
            💬 QQ技术群: 1224299352 |
            开源免费 | 程序员专属工具
        </p>
    </div>

    <!-- 弹窗HTML -->
    <div class="modal-overlay" id="donationModal">
        <div class="modal">
            <h3>💖 感谢您的支持</h3>
            <p>您的每一份支持都是我们前进的动力！<br>
                我们会继续优化工具，为开发者提供更好的编程体验。</p>
            <div class="modal-buttons">
                <button class="modal-btn primary" onclick="closeModal()">知道了</button>
            </div>
        </div>
    </div>

    <script>
        // 导航栏移动端菜单切换
        const navToggle = document.querySelector('.nav-toggle');
        const navMenu = document.querySelector('.nav-menu');

        navToggle.addEventListener('click', function () {
            navToggle.classList.toggle('active');
            navMenu.classList.toggle('active');
        });

        // 点击菜单项时关闭移动端菜单
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                navToggle.classList.remove('active');
                navMenu.classList.remove('active');
            });
        });

        // 滚动时改变导航栏样式
        window.addEventListener('scroll', function () {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.95)';
            } else {
                navbar.style.background = 'white';
            }
        });

        function showDonationModal() {
            document.getElementById('donationModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('donationModal').style.display = 'none';
        }

        // 点击遮罩层关闭弹窗
        document.getElementById('donationModal').addEventListener('click', function (e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // 添加一些互动效果
        document.addEventListener('DOMContentLoaded', function () {
            // 为功能项添加点击效果
            const featureItems = document.querySelectorAll('.feature-item');
            featureItems.forEach(item => {
                item.addEventListener('click', function () {
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 150);
                });
            });
        });
    </script>
</body>

</html>